import { createRouter, createWebHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";

/**
* 因为 Vue-Router 提供的配置路由对象的 meta 属性有限，所以须要扩展 RouteMeta 接口。
* 路由对象 meta 属性说明：
* meta: {
* title： 菜单标题
* icon: 菜单图标 
* linkTo： 外链地址（新窗口打开)
* cache： 是否缓存：true缓存，false不缓存，会将 name 值用于 <keep-alive>的includes上
* hidden: 是否在菜单中显示：true显示，false隐藏
* isBreadcrumb： 是否显示到面包屑：默认或true会显示，false不显示。
* }
*/
declare module "vue-router" {
  interface RouteMeta {
    title?: string; // 菜单标题
    icon?: string; // 图标
    linkTo?: string; // 外链地址
    cache?: boolean; //是否缓存：true缓存，false不缓存，会将 name 值用于 <keep-alive>的 includes上
    hidden?: boolean; // 是否在菜单中显示：true显示，false隐藏
    isBreadcrumb?: boolean; // 是否显示到面包屑，默认或true会显示，false不显示。
  }
}
// 路由配置数组(单独抽取，后面会后端动态加载)
export const dynamicRoutes: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Layout",
    component: () => import("@/layout/index.vue"),
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "Home",
        component: () => import("@/views/home/index.vue"),
        meta: {
          title: "工作台",
          icon: "solar:home-broken",
          cache: false,
          hidden: false,
        },
      },
      {
        path: "/system",
        name: "System",
        redirect: "/system/menu",
        meta: {
          title: "系统管理",
          icon: "grommet-icons:system",
          parent: "System",
        },
        children: [
          {
            path: "/system/menu",
            name: "SystemMenu",
            component: () => import("@/views/system/menu/index.vue"),
            meta: {
              title: "菜单管理",
              cache: true,
              hidden: false,
            },
          },
          {
            path: "/system/role",
            name: "SystemRole",
            component: () => import("@/views/system/role/index.vue"),
            meta: {
              title: "角色管理",
              cache: true,
              hidden: false,
            },
          },
          {
            path: "/system/user",
            name: "SystemUser",
            component: () => import("@/views/system/user/index.vue"),
            meta: {
              title: "用户管理",
              cache: true,
              hidden: false,
            },
          },
        ],
      },
      {
        path: "/link",
        name: "Link",
        component: () => import("@/views/link/index.vue"),
        meta: {
          title: "百度官网",
          icon: "akar-icons:link",
          cache: false,
          hidden: false,
          linkTo: "https://www.baidu.com", // 外链跳转地址
        },
      },
     
      {
        path: "/:path(.*)*", // 404匹配其他路由地址
        name: "NotFound",
        component: () => import("@/views/sys/error/404.vue"),
        meta: {
          title: "mdi:web-refresh",
          icon: "mdi:web-refresh",
          cache: true,
          hidden: true,
        },
      },
    ],
  },
];
/**
 * 默认路由配置 ：所有用户都可访问的路由，
 * 不需要通过后端接口返回，都需要将下面路由添加到路由表中
 */
export const defaultRoutes: RouteRecordRaw[] = [
  {
    path: '/401',
    name: 'NoPermission',
    component: () => import('@/views/sys/error/401.vue'),
    meta: {
      title: '401页面',
      icon: 'ele-Warning',
      cache: true,
      hidden: true,
    }
  },
  {
    path: '/:path(.*)*', //  404匹配不存在的路由
    name: 'NotFound',
    component: () => import('@/views/sys/error/404.vue'),
    meta: {
      title: '未找到此页面',
      cache: true,
      hidden: true,
    }
  },
]
/**
 * 全屏显示路由，不作用到 layout 布局渲染出口。
 * （后端路由控制：后端配置菜单数据中不需要下面的菜单项）
 */
export const fullscreenRoutes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/sys/login/index.vue"),
    meta: {
      title: "登录",
      hidden: true,
    },
  },
  {
    path: "/demonstration",
    name: "Demonstration",
    component: () => import("@/views/dataV/demonstration/index.vue"),
    meta: {
      title: "可视化大屏演示",
      hidden: true,
    },
  },
];
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // routes: [...dynamicRoutes, ...fullscreenRoutes],
  routes: [...defaultRoutes, ...fullscreenRoutes],
});

export default router;
